<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="HuangZhiming's new resume. This resume use the Bootstrap's example.">
    <meta name="author" content="HuangZhiming">
    <link rel="icon" href="./asserts/img/head.ico">
    <link href="./font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--
    <title>Carousel Template for Bootstrap</title>
    -->
    <title>黄之明的简历</title>

    <!-- Bootstrap core CSS -->
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="carousel.css" rel="stylesheet">
  </head>
  <body>

    <header>
      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand font-artical" href="#">黄之明的简历</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="https://github.com/HuangZhiming-the-Great" target="_blank">GitHub <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="https://gitee.com/huangshangwu" target="_blamk">Gitee</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./old-page/index.html" target="_blank">原始网页简历</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./public/黄之明的简历.pdf">文稿简历查看与下载</a>
            </li>
          </ul>
          <!--还没有想好这个搜索的东西怎么用
          <form class="form-inline mt-2 mt-md-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
          -->
        </div>
      </nav>
    </header>

    <main role="main">

      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1" class=""></li>
          <li data-target="#myCarousel" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="first-slide" src="./asserts/img/讨论交流.jpeg" alt="First slide">
            <div class="container">
              <div class="carousel-caption text-danger text-left">
                <h1>工作、学习心态</h1>
                <p class="text-bg">乐于分享, 喜欢通过交流和查询信息来与他人共同成长和学习。</p>
                <p><a class="btn btn-lg btn-primary" href="#pomodoro" role="button">项目经验</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img class="second-slide" src="./asserts/img/家乡美食.jpeg" alt="Second slide">
            <div class="container">
              <div class="carousel-caption">
                <h1>个人基本信息</h1>
                <p>我是来自<strong>湖北仙桃</strong>的<strong>27岁小伙</strong>，父母都是<strong>汉族</strong>人，除了比较辣的食物🌶以外，喜欢所有的美食。</p>
                <p><a class="btn btn-lg btn-primary" href="#footer" role="button">更多基本信息</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img class="third-slide" src="./asserts/img/我.jpg" alt="Third slide">
            <div class="container">
              <div class="carousel-caption text-success text-right">
                <h1>性格特征</h1>
                <p class="text-bg">自我感觉乐于交流与沟通，同时“一个人也可以很热闹”。喜欢在听取他人观点的基础上自己思考和找到问题的答案。过去不太注意日常身心调整，现在开始关注、学习和思考心态调整的方法。</p>
                <!--实在是不知道该用个什么链接好
                <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                -->
              </div>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>


      <!-- Marketing messaging and featurettes
      ================================================== -->
      <!-- Wrap the rest of the page in another container to center all the content. -->

      <div class="container marketing">

        <!-- Three columns of text below the carousel -->
        <div class="row">
          <div class="col-lg-4">
            <img class="rounded-circle" src="./asserts/img/前端基础.png" alt="Generic placeholder image" width="140" height="140">
            <h2>前端基础</h2>
            <p>对JAVASCRIPT语言的<strong>原型链、静态作用域</strong>和<strong>动态执行上下文及闭包</strong>有清晰的认识。对JAVASCRIPT面向<strong>函数编程</strong>和面向<strong>对象编程</strong>有基本的认识。对HTML标签的<strong>基本类型</strong>和<strong>语义化</strong>有基本的了解，明白其与<strong>DOM</strong>的关系。对常见的<strong>CSS的选择器</strong>有基本的认识，熟悉<strong>常用的样式</strong>，并大致清楚一些特殊样式与标签会产生的效果。</p>
            <p><a class="btn btn-secondary" href="#footer" role="button">了解更多 »</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="./asserts/img/logo512.png" alt="Generic placeholder image" width="140" height="140">
            <h2>前端框架</h2>
            <p>了解<strong>Jquery</strong>的历史,能够体会其意义，<strong>能简单使用Bootstrap</strong>。对<strong>React</strong>较为熟悉，<strong>能够制作简单的组件</strong>。大致看过React的设计初衷，对<strong>React的数据流动与生命周期</strong>有一定的实际使用和体会。对<strong>Redux有一定的了解</strong>和体会，能够读懂部分源码。由于对前端的认识还源于Scratch（用React编写的前端界面），所以对Vue还没有太多的认识。在实际的实践中认识到工程化的重要性和实用性，学会了<strong>简单设置Babel和Webpack的配置文件</strong>，用来编译和打包。当然使用现成的脚手架似乎更加的实际☺️</p>
            <p><a class="btn btn-secondary" href="#footer" role="button">了解更多 »</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="./asserts/img/logo@2x.png" alt="Generic placeholder image" width="140" height="140">
            <h2>基本素养</h2>
            <p>在实际的学习和实践中深刻认识到<strong>良好的编程习惯</strong>对写出出色程序的重要性。了解并使用过<strong>eslint</strong>。对变量声明和起名、代码段注释和逻辑清晰稳定、参数检查有体会和关注。平时<strong>喜欢用markdown</strong>写一些随笔或者日记等。曾经对git背后提倡的工作方式有种相见恨晚的感觉！能够<strong>熟练的使用git</strong>在本地和像GitHub、Gitee这一类git远端仓库上进行多人合作。熟悉常用的操作和合作流程，自建过ssh通信的git服务器。对git的历史管理有一定的体会，并随时愿意继续学习git有关的工作理念和各种未知的使用技巧。</p>
            <p><a class="btn btn-secondary" href="#footer" role="button">了解更多 »</a></p>
          </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->


        <!-- START THE FEATURETTES -->

        <hr class="featurette-divider">

        <div class="row featurette" id="pomodoro">
          <div class="col-md-6">
            <h2 class="featurette-heading">Simple番茄钟 <span class="text-muted">用你喜欢的音乐提醒⏰你工作和休息。</span></h2>
            <p class="lead">简洁的界面，使用默认的5+25时间设置，您也可以结合自己的情况进行简单的调整。最重要的是提示您工作和休息的声音完全由您来✅确定。</p>
          </div>
          <div class="col-md-6 align-self-end">
            <div class="iframe-container">
              <iframe src="//player.bilibili.com/player.html?aid=247167388&bvid=BV1jv411a7V8&cid=311117441&page=1"> </iframe>
            </div>
          </div>
        </div>

        <hr class="featurette-divider">

        <div class="row featurette">
          <div class="col-md-6 order-md-2">
            <h2 class="featurette-heading">浏览器也能看视频！ <span class="text-muted">那就用它做个视频播放器😊😏</span></h2>
            <p class="lead">当你只想静静的看个视频的时候，她不会在自己的界面上给你任何广告。因为她知道你只想静静的看着她，就静静的就好。</p>
          </div>
          <div class="col-md-6 order-md-1 align-self-end">
            <div class="iframe-container">
              <iframe src="//player.bilibili.com/player.html?aid=374674688&bvid=BV1YZ4y1w7ue&cid=311331426&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
            </div>
          </div>
        </div>

        <hr class="featurette-divider">

        <div class="row featurette">
          <div class="col-md-6">
            <h2 class="featurette-heading">
              Scratch！Scratch！Scratch！ <span class="text-muted">让我入坑前端的编程软件</span></h2>
            <p class="lead">曾经，作为Q-world“课程研发专员”，我被Scratch2拖拽就能编写程序的神奇吸引，通过在网上查找资料，发现它还能和Arduino“联系”，于是就有了这个Windows下的插件。</p>
          </div>
          <div class="col-md-6 align-self-end">
            <div class="iframe-container">
              <iframe src="//player.bilibili.com/player.html?aid=844709004&bvid=BV1v54y187Ax&cid=311910049&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
            </div>
          </div>
        </div>

        <hr class="featurette-divider">

        <!-- /END THE FEATURETTES -->

      </div><!-- /.container -->

      
      <!-- FOOTER -->
      <!--
      <footer class="container" id="footer">
        <p class="float-right"><a href="#">回到顶部</a></p>
        <p>&copy; 2017-2018 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
      </footer>
      -->

      <!-- the copy of other's footer -->
      <footer id="footer">
        <div class="container">
          <div class="row">
            <div class="col-md-3 col-sm-7">
              <h4>教育经历:</h4>
              <p>海南大学 应用化学系</p>
              <span class="text-muted">2012/09-2016/06</span>
              <p>湖北省仙桃市高级中学</p>
              <span class="text-muted">2009/09-2012/06</span>
            </div>
            <div class="col-md-2 col-sm-5">
              <h4>英语水平</h4>
              <p>CET4：500</p>
            </div>
            <div class="col-md-4 col-sm-7">
              <h4><strong>联系我</strong></h4>
              <div class="wechat">
                <i class="fa fa-wechat"></i>
                <span class="lead"> happy_then_laugh</span>
              </div>
              <div>
                <i class="fa fa-phone-square"></i>
                <span class="lead"> 15972286393</span>
              </div>
              <div>
                <i class="fa fa-envelope"></i>
                <span class="lead"> HuangZhiming212@163.com</span>
              </div>
            </div>
            <div class="col-md-2 col-sm-5">
              <img class="wechat" src="./asserts/img/微信二维码.jpg" alt="我的微信二维码">
            </div>
            <!--
            <div class="col-md-5">
              <h4>走进前端</h4>
              <p>在快3年的STEAM科学课程研发中，我接触到了arduino和C++，scratch和javascript、react，github和开源，邂逅了前端。前端（编程）技术可以让自己成为更好的STEAM研发，做更多有趣和对社会有价值的事，有更好的回报和职业发展，为什么不去做呢？！</p>
            </div>
            -->
          </div>
        </div>
        <div class="container">
          <p class="float-right circle-green"><a href="#">回到顶部</a></p>
          <p class="offset-3">HuangZhiming 在2021年3月编辑</p>
        </div>
      </footer>
    </main>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!--
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    -->
    <script>window.jQuery || document.write('<script src="./bootstrap/vendor/jquery-slim.min.js"><\/script>')</script><script src="./bootstrap/vendor/jquery-slim.min.js"></script>
    <script src="./bootstrap/vendor/popper.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="./bootstrap/vendor/holder.min.js"></script>
    
  </body>
  <!-- Let the iframe seemed well -->   
  <script>
    
    for (let index = 0; index < document.querySelectorAll(".iframe-container").length; index++) {
      // console.log(document.querySelectorAll(".iframe-container")[0].clientWidth);
      document.querySelectorAll(".iframe-container")[index].style.height = (0.62*document.querySelectorAll(".iframe-container")[index].clientWidth)+"px"; 
    }
    
  
  </script>
</html>